<template>
  <view class="container">
    <custom-nav theme="primary" title="完美繁花会员卡"></custom-nav>

    <view class="content">
      <view class="p-news">
        <swiper class="p-swiper" vertical autoplay :interval="2000" :duration="500" circular>
          <swiper-item v-for="(item, index) in rollList" :key="index">
            <view class="news-con" @click="toDetails(item.user?.id)">
              <image :src="item.user?.pic || avatarImg" mode="scaleToFill" class="p-avatar"></image>
              <text class="news-txt">{{item.data}}</text>
            </view>
          </swiper-item>
        </swiper>
        <view class="news-more" @click="toMember">
          <text style="margin-right:10rpx">我的会员卡</text>
          <uni-icons type="right" size="14" color="#666"></uni-icons>
        </view>
      </view>

      <view class="p-content">
        <view class="p-item" :class="activeId == index ? 'p-active' : ''" v-for="(item, index) in vipList" :key="index" @click="changeItem(item, index)">
          <view :class="item.disabled ? 'item-disabled' : ''">
            <view class="p-recommend" v-if="index == 0">
              <image :src="urlConf + 'common/recommend.svg'" mode="scaleToFill" style="width: 240rpx; height: 80rpx" />
              <view class="p-more" @click="toVip">
                <text style="margin-right:10rpx">至尊会员介绍</text>
                <uni-icons type="right" size="14" color="#fff"></uni-icons>
              </view>
            </view>
            <view class="p-con">
              <view class="p-title">
                <text>{{item.title}}</text>
                <text>{{item.price}}<text class="p-unit">元</text> </text>
              </view>
              <view class="p-tips">
                <view>{{item.smalltext}}</view>
                <view class="p-desc">{{item.ftitle}}</view>
              </view>
              <image :src="urlConf + 'common/checked.svg'" mode="scaleToFill" class="p-check"></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 购买须知 -->
      <tips-card :curData="curData"></tips-card>
    </view>
    <view class="purchase-bottom">
      <view class="p-amount">
        <view class="p-amount-num">{{activeItem.price}}<text style="fontSize: 28rpx">元</text></view>
        <view class="p-amount-tips">
          <text v-for="(v, i) in payText" :key="i">
            <text :class="v.color">{{v.label}}</text>
          </text>
          <rich-text :nodes="payText"></rich-text>
        </view>
      </view>
      <custom-btn class="p-btn" :class="curMember ? 'item-disabled' : ''" @click="buySubmit">立即支付</custom-btn>
    </view>
  </view>
</template>

<script setup>
import TipsCard from "./components/tips-card.vue";
import { urlConf } from "@/config/resource";
import { fetchVipList, fetchRollList } from "@/api";
import { textColorFn } from "@/utils";
import { getItem, setItem } from "@/utils/storage";
import avatarImg from "@/static/common/avatar.svg";

import useStore from "@/store";
const { common, app, register, person } = useStore();

const activeId = ref(0);
const activeItem = ref({});
const vipList = ref([]);
const rollList = ref([]);
const member_title = ref("");
const payText = computed(() => {
  const { smalltext, ftitle } = activeItem.value;
  return textColorFn(smalltext + "，" + ftitle);
});

const curMember = computed(() => {
  return member_title.value == "至尊会员";
});

const curData = computed(() => {
  const t = 6;
  const curConf = register.articleConf[t] || [];
  return curConf[0];
});

const toVip = () => {
  uni.navigateTo({ url: "/subPages/member/supreme" });
};

const toMember = () => {
  uni.navigateTo({ url: "/subPages/member/index" });
};

const getRollList = () => {
  fetchRollList().then((res) => {
    rollList.value = res.data[0];
  });
};

const getList = async () => {
  const { data } = await fetchVipList();
  activeItem.value = data[0];
  activeId.value = 0;

  const { member } = getItem("user_info");

  if (member?.title) {
    member_title.value = member.title;
    if (member.title == "至尊会员") {
      data.forEach((v) => {
        if (v.title != "至尊会员") {
          v.disabled = true;
        }
      });
    } else {
      const curIndex = data.findIndex((v) => v.title == member?.title);
      data.forEach((v, i) => {
        if (v.title.includes("会员")) {
          if (i) {
            if (i <= curIndex) {
              v.disabled = true;
            }
          }
        }
      });
    }
  }

  vipList.value = data;
};

const changeItem = (item, index) => {
  if (item.disabled) {
    uni.showToast({
      title: "已有会员或高级会员，不可重复购买",
      icon: "none",
    });
    return;
  }
  activeId.value = index;
  activeItem.value = item;
};

// 立即支付
const buySubmit = () => {
  if (curMember.value) {
    uni.showToast({
      title: "已有会员或高级会员，不可重复购买",
      icon: "none",
    });
    return;
  }
  const params = {
    member_id: activeItem.value.id,
  };

  app
    .surePayment(params)
    .then((res) => {})
    .catch((err) => {});
};

const getText = () => {
  register.getArticleConfig();
};

const toDetails = (id) => {
  person.updatePersonId({ user_id: id });
  uni.navigateTo({
    url: "/subPages/details/index",
  });
};

onShow(() => {
  const flag = getItem("confirmPay");
  if (flag) {
    common.updatePurchaseParams(activeItem.value);
    common.updatePopupOpen(true, "purchase");
    uni.removeStorageSync("confirmPay");
  }
});

onLoad(() => {
  getRollList();
  getList();
  getText();
});
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";

.container {
  background: #f5f5f5;
}
.content {
  padding: 20rpx;
  background: transparent;
}

.p-news {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffefef;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  border: 1rpx solid rgba(255, 92, 85, 0.5);
  .p-avatar {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
    border-radius: 40rpx;
  }

  .p-swiper {
    height: 80rpx;
    flex: 1;
  }
  .news-con {
    height: 80rpx;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 28rpx;
    color: #000;
  }
  .news-more {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 24rpx;
    color: #666;
  }
}
.p-item {
  padding: 4rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
}
.p-con {
  background: #fff;
  padding: 40rpx 30rpx;
  border-radius: 18rpx 18rpx 22rpx 18rpx;
  position: relative;
  .p-title {
    font-weight: bold;
    font-size: 40rpx;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }
  .p-unit {
    font-size: 28rpx;
  }
  .p-tips {
    font-weight: 400;
    font-size: 32rpx;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .p-desc {
    background: linear-gradient(90deg, rgba(255, 76, 0, 0.2) 0%, rgba(255, 76, 0, 0) 100%);
    border-radius: 40rpx;
    padding: 10rpx 14rpx;
    color: #ff4c00;
  }
  .p-check {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60rpx;
    height: 60rpx;
    display: none;
  }
}

.p-recommend {
  background: linear-gradient(90deg, #ff612b 0%, #ff3535 100%);
  border-radius: 20rpx 20rpx 0 0;
  padding: 0 30rpx;
  padding-bottom: 20rpx;
  margin-bottom: -20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #fff;
}

.p-active {
  border: none;
  background: #fff;
  background: linear-gradient(90deg, rgba(255, 98, 44, 1), rgba(255, 54, 54, 1));
  .p-check {
    display: block;
  }
}

.purchase-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  padding-bottom: 72rpx;
  background: #fff;
  border-top: 1rpx solid #ddd;
  position: relative;

  .p-amount-num {
    font-weight: bold;
    font-size: 48rpx;
    color: #000;
  }

  .p-amount-tips {
    font-size: 28rpx;
    color: #666;
  }

  .p-btn {
    width: 240rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-weight: bold;
    font-size: 40rpx;
    color: #fff;
    background: linear-gradient(90deg, #ff602b 0%, #ff2b2b 100%);
    border-radius: 120rpx;
  }
}

.item-disabled {
  opacity: 0.5;
}

.news-txt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>  